/* 页面容器 */
.pageContainer {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 120px; /* 为navbar和进度条留出空间 */
  padding-bottom: 20px;
}

/* 服务保障部分 */
.serviceGuarantee {
  background-color: #fff;
  padding: 12px 16px;
  margin: 0 12px 12px 12px;
  border-radius: 8px;
}

.guaranteeTitle {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.shieldIcon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: #1890ff;
}

.guaranteeList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guaranteeItem {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
}

.guaranteeItem::before {
  content: "•";
  color: #1890ff;
  margin-right: 4px;
  font-size: 12px;
}

/* 风险告知部分 */
.disclaimer {
  background-color: #f0f0f0;
  padding: 12px 16px;
  margin: 0 12px 12px 12px;
  border-radius: 8px;
}

.disclaimerText {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.disclaimerLink {
  color: #1890ff;
  text-decoration: none;
}

/* 聊天界面 */
.chatContainer {
  padding: 12px 16px;
  margin: 0 12px 8px 12px;
  max-height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  margin-bottom: 75px;
  transition: margin-bottom 0.3s ease;
}

/* 当档案选择界面显示时，调整聊天容器的底部边距 */
.chatContainer.withFileSelection {
  margin-bottom: 250px; /* 为档案选择界面留出更多空间 */
  max-height: 300px; /* 限制聊天容器高度，确保内容可见 */
}

.chatMessage {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.doctorAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.messageBubble {
  background-color: #fff;
  padding: 10px 14px;
  border-radius: 16px;
  max-width: 80%;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  border: 1px solid #e8e8e8;
}

/* 用户消息 */
.userMessage {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin-bottom: 12px;
  width: 100%;
}

.userMessageBubble {
  background-color: #1890ff;
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px;
  max-width: 80%;
  font-size: 13px;
  line-height: 1.4;
  margin-right: 10px;
  word-wrap: break-word;
  word-break: break-word;
}

.userAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.userAvatarIcon {
  color: #fff;
  font-size: 18px;
}

/* 消息文本 */
.messageText {
  margin-bottom: 8px;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}

/* 消息中的图片 */
.messageImages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.messageImage {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.messageImage:hover {
  transform: scale(1.05);
}

/* 图片预览模态框 */
.imageModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.imageModalContent {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.previewImage {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.closeButton {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.closeButton:hover {
  background-color: #fff;
}

/* 上传容器 */
.uploadContainer {
  background-color: #fff;
  padding: 16px;
  margin: 0 12px 12px 12px;
  border-radius: 8px;
}

.uploadHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.uploadTitle {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.skipButton {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
}

.uploadSubtitle {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
}

.uploadArea {
  border: 2px dashed #e8e8e8;
  border-radius: 8px;
  padding: 16px;
  min-height: 120px;
}

.uploadGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.uploadButton {
  width: 80px;
  height: 80px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  background-color: #f8f8f8;
}

.fileInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.uploadIcon {
  font-size: 24px;
  color: #999;
}

.uploadedImage {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.uploadedImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.removeImage {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上传进度 */
.uploadProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 6px;
  border-radius: 0 0 8px 8px;
}

.progressBar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progressFill {
  height: 100%;
  background-color: #1890ff;
  transition: width 0.3s ease;
}

.progressInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.progressText {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
}

.speedText {
  color: #fff;
  font-size: 9px;
  opacity: 0.8;
}

.timeText {
  color: #fff;
  font-size: 9px;
  opacity: 0.8;
}

/* 上传错误 */
.uploadError {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 77, 79, 0.9);
  padding: 4px;
  border-radius: 0 0 8px 8px;
}

.errorText {
  color: #fff;
  font-size: 10px;
  text-align: center;
  display: block;
}

/* 上传状态 */
.uploadStatus {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.uploadStatus.success {
  background-color: #52c41a;
  color: #fff;
}

.uploadStatus.error {
  background-color: #ff4d4f;
  color: #fff;
}

/* 上传提示 */
.uploadingTip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1890ff;
  font-size: 14px;
  margin-top: 12px;
  padding: 12px;
  background-color: #f0f8ff;
  border-radius: 8px;
  border: 1px solid #d6e4ff;
}

.uploadingIcon {
  font-size: 18px;
  flex-shrink: 0;
}

.uploadingText {
  flex: 1;
}

.uploadingSubtext {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* 上传成功提示 */
.uploadSuccessTip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #52c41a;
  font-size: 14px;
  margin-top: 12px;
  padding: 12px;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
}

.successIcon {
  font-size: 18px;
  flex-shrink: 0;
}

.successText {
  flex: 1;
  font-weight: 500;
}

/* 上传错误提示 */
.uploadErrorTip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff4d4f;
  font-size: 14px;
  margin-top: 12px;
  padding: 12px;
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 8px;
}

.errorIcon {
  font-size: 18px;
  flex-shrink: 0;
}

/* 输入区域 */
.inputContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px 16px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.inputField {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  font-size: 14px;
  resize: none;
  outline: none;
  background-color: #f8f8f8;
}

.inputField::placeholder {
  color: #999;
  font-size: 14px;
}

.submitButton {
  width: 60px;
  height: 40px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.submitButton:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 确认按钮容器 */
.confirmContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px 16px;
  border-top: 1px solid #e8e8e8;
}

.confirmButton {
  width: 100%;
  height: 44px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .progressStep {
    font-size: 12px;
  }
  
  .guaranteeItem {
    font-size: 13px;
  }
  
  .disclaimerText {
    font-size: 13px;
  }
}


/* 文件选择界面 */
.fileSelectionContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.fileSelectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: white;
}

.fileSelectionHeader h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.newFileText {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.newFileText:hover {
  color: #40a9ff;
}

.archivesList {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  background-color: #f5f5f5;
}

.archiveCard {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e0e0e0;
}

.archiveCard:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.archiveCard.selected {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  background-color: #f0f8ff;
}

.archiveCard:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.archiveInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.archiveName {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.archiveRelationship {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.archiveDetails {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.selectButton {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.selectButton:hover {
  background-color: #40a9ff;
}

.deleteButton {
  background-color: #fff;
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.deleteButton:hover {
  background-color: #ff4d4f;
  color: #fff;
}

.emptyArchives {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.emptyIcon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.emptyText {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.emptySubtext {
  font-size: 14px;
  color: #999;
}

.fileSelectionActions {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
}

.newFileButton {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #1890ff;
  border-radius: 6px;
  background-color: #1890ff;
  color: #fff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newFileButton:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

/* 档案信息显示样式 */
.archiveDisplayInfo {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
}

.archiveTitle {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
}

.archiveDetails {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archiveItem {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.archiveLabel {
  color: #666;
  min-width: 70px;
  font-weight: 500;
}

.archiveValue {
  color: #333;
  flex: 1;
}

/* 分诊结果 */
.triageResult {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.triageInfo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.triageText {
  font-size: 14px;
  color: #666;
}

.departmentName {
  font-size: 14px;
  color: #ff4d4f;
  font-weight: 500;
}

.reselectButton {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
}

.reselectIcon {
  font-size: 16px;
}

/* 推荐服务 */
.recommendations {
  background-color: white;
  padding: 16px;
}

.recommendationsHeader {
  margin-bottom: 16px;
}

.recommendationsTitle {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px 0;
}

.recommendationsSubtitle {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.serviceList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.serviceItem {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.serviceItem:hover {
  background-color: #f0f8ff;
  border-color: #1890ff;
}

.serviceIcon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.iconChat,
.iconPhone,
.iconVideo {
  font-size: 20px;
  color: white;
}

.serviceInfo {
  flex: 1;
  min-width: 0;
}

.serviceName {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.recommendedTag {
  background-color: #ff6b35;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: normal;
}

.serviceDesc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.servicePrice {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.originalPrice {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.currentPrice {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b35;
}

.arrow {
  font-size: 16px;
  color: #999;
}
